<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表页</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<style>
.caption p{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.container .row>div .thumbnail>img{
    height:200px;
}
</style>
</head>
<body>
<div class="page-header">
    <h1>好货列表 <small>有好货</small></h1>
</div>

<div class="container">
    <div class="row">
        
    </div>
</div>
</body>
<script src="./js/page.js"></script>
<script src="./js/promiseAjax.js"></script>
<script type="text/javascript">

pAjax({
    url:"./server/list.php",
    type:"get"
}).then(function(res){
    var total = res.length;
    var pageSize = 3;
    new Page({
        pageData:{
            total:total,
            pageSize:pageSize
        },
        language:{
            first:"首页",
            previous:"上一页",
            next:"下一页",
            last:"尾页"
        }
    },function(currentPage){
        var str = '';
        var arr = res.slice((currentPage-1)*pageSize,currentPage*pageSize);
        for(var i=0;i<arr.length;i++){
            str += `
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="${arr[i].imgpath}">
                    <div class="caption">
                        <h3>${arr[i].name}</h3>
                        <p>${arr[i].introduce}</p>
                        <p><a href="detail.html?id=${arr[i].id}" class="btn btn-primary" role="button">查看详情</a></p>
                    </div>
                </div>
            </div>
            `
        }
        document.querySelector(".container .row").innerHTML = str;
    });
    
});
</script>
</html>